<template>
  <div class="library">
    <!-- @chooseType="chooseType" -->
    <v-filter :diff="filter" :filterList="filterList" :opts="opts"></v-filter>
    <main>
      <keep-alive>
        <router-view :key="key" />
      </keep-alive>
    </main>
  </div>
</template>

<script>
import vFilter from "@/components/common/filter/Index";
export default {
  data() {
    return {
      filter: ["sex"],
      filterList: {}, //分类列表
    };
  },
  components: {
    vFilter,
  },
  computed: {
    opts() {
      return this.$route.params; //选择的选项
    },
    key() {
      return this.$route.path;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.genres();
  },
  methods: {
    //筛选标签
    // chooseType() {
    //   this.params.pageNum = 1;
    //   // this.opts = this.$route.params;
    // },
    async genres() {
      try {
        let res = await this.$api.home.genres({});
        if (res.code === 1) {
          let list = res.source;
          for (let key in list) {
            let item = {
              categoryId: "all",
              name: "All",
              site: key == "female" ? 2 : key == "male" ? 1 : null,
            };
            list[key].unshift(item);
          }
          this.filterList = list;
        }
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.library {
  background: #f5f5f5;
  > main {
    width: 1200px;
    min-height: calc(100vh - 390px);
    margin: auto;
    padding: 31px 0;
    position: relative;
  }
}
</style>
